<template>
  <div>
    <el-row class="m-title">
      <el-col :span="24">
        <h3>&nbsp;{{comment.total}}&nbsp;条网友点评</h3>
      </el-col>
    </el-row>
    <div class="m-sum-card">
      <div class="container">
        <div class="comment" v-for="item in comment.list" :key="item.id">
          <div class="info">
            <img :src="'data:image/png;base64,'+item.user.headImg" alt="头像" width="50" height="50" />
            <div class="right">
              <div class="name" style="font-weight:700">{{item.user.name}}</div>
              <el-rate disabled v-model="item.score" />
              <div class="date">
                <span v-for="(food,idx) in item.foods" :key="idx">
                  <span v-if="food == null || food.name == null "></span>
                  <span v-else >&nbsp;{{food.name}}&nbsp;</span>
                </span>
                <div>{{item.creatTime}}</div>
              </div>
            </div>
          </div>
          <div class="content" style="font-weight:500">
            {{item.content}}
            <br />
            <img
              v-if="item.imgs"
              :src="'data:image/png;base64,'+item.imgs"
              width="100"
              height="100"
            />
          </div>
          <div class="control">
            <span class="like">
              <i class="iconfont el-icon-thumb"></i>
              <span class="like-num">{{item.praiseNum}}</span>
            </span>
          </div>
          <div v-if="item.reply" class="reply" style="margin-left:18px">
            <div class="reply-content">
              <span class="from-name" style="font-weight:700;color:#41B883">商家回复</span>
              <span>:</span>
              <span>{{item.reply}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <dl class="m-sum-card">
      <div v-for="(item,idx) in comment.list" :key="idx">
        <dt>
          <h1>{{item.orderId}}</h1>
        </dt>
        <dd v-for="(item,idx) in item.imgList" :key="idx">
          <img :src="'data:image/png;base64,'+item" />
        </dd>
        <dd>{{item.content}}</dd>
        <dd>{{item.praiseNum}}</dd>
        <dd>{{item.reply}}</dd>
        <dd>{{item.creatTime}}</dd>
      </div>
    </dl>-->
  </div>
</template>

<script>
export default {
  props: ["comment"],
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped lang="scss">
@import "@/assets/css/detail/comment.scss";
</style>
